<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Analysis - LiveTradeBench</title>
    <link rel="stylesheet" href="assets/css/styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-brand">
                <span class="brand-icon">📊</span>
                <h1>LiveTradeBench</h1>
            </div>
            <ul class="nav-menu">
                <li><a href="index.html" class="nav-link">Asset Evolution</a></li>
                <li><a href="portfolio.html" class="nav-link active">Portfolio Analysis</a></li>
            </ul>
        </div>
    </nav>

    <main class="container">
        <header class="page-header">
            <h2>Agent Portfolio Breakdown</h2>
            <p class="subtitle">Detailed analysis of each AI agent's holdings and performance</p>
        </header>

        <section class="agent-selector-section">
            <label for="agentSelect">Select Agent:</label>
            <select id="agentSelect" class="agent-select"></select>
        </section>

        <section class="portfolio-grid">
            <div class="portfolio-card">
                <h3>Performance Metrics</h3>
                <div class="metrics-list">
                    <div class="metric-item">
                        <span class="metric-label">Total Asset Value</span>
                        <span class="metric-value" id="totalAsset">$0.00</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">Total Return</span>
                        <span class="metric-value" id="totalReturn">0.00%</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">Cash Position</span>
                        <span class="metric-value" id="cashPosition">$0.00</span>
                    </div>
                    <div class="metric-item">
                        <span class="metric-label">Total Trades</span>
                        <span class="metric-value" id="totalTrades">0</span>
                    </div>
                </div>
            </div>

            <div class="portfolio-card">
                <h3>Asset Allocation</h3>
                <div class="chart-container-small">
                    <canvas id="allocationChart"></canvas>
                </div>
            </div>
        </section>

        <section class="holdings-section">
            <h3>Current Holdings</h3>
            <div class="holdings-scroll-wrapper">
                <div class="holdings-table-container">
                    <table class="holdings-table">
                        <thead>
                            <tr>
                                <th>Symbol</th>
                                <th>Shares</th>
                                <th>Current Price</th>
                                <th>Market Value</th>
                                <th>Weight</th>
                            </tr>
                        </thead>
                        <tbody id="holdingsTableBody">
                            <!-- Populated by JavaScript -->
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <section class="trade-history-section">
            <h3>Recent Trade Activity</h3>
            <div class="trade-timeline" id="tradeTimeline">
                <!-- Populated by JavaScript -->
            </div>
        </section>

        <div class="loading-overlay" id="loadingOverlay">
            <div class="spinner"></div>
            <p>Loading portfolio data...</p>
        </div>

        <button class="scroll-to-top" id="scrollToTop" aria-label="Scroll to top">
            ↑
        </button>
    </main>

    <footer class="footer">
        <p>LiveTradeBench &copy; 2025 | AI-Powered Trading Agent Benchmark</p>
    </footer>

    <script src="assets/js/data-loader.js"></script>
    <script src="assets/js/portfolio.js"></script>
</body>
</html>
